<template>
  <div class="addform">
    <h1>增加榜样学子</h1>
    <br />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="榜样学子姓名" prop="byxzName">
        <el-input v-model="ruleForm.byxzName"></el-input>
      </el-form-item>
      <el-form-item label="开发团队职业" prop="byxzPos">
        <el-select
          class="xx"
          v-model="ruleForm.byxzPos"
          placeholder="请选择团队职业"
        >
          <el-option label="前端程序员" value="前端程序员"></el-option>
          <el-option label="后端程序员" value="后端程序员"></el-option>
          <el-option
            label="前后端交互程序员"
            value="前后端交互程序员"
          ></el-option>
          <el-option label="产品美术设计" value="产品美术设计"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="榜样学子照片" prop="byxzImg">
        <el-upload
          style="float: left"
          action=""
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
          v-model="ruleForm.byxzImgA"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb,只能上传一张
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="榜样学子介绍" prop="byxzMy">
        <el-input type="textarea" v-model="ruleForm.byxzMy"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >添加学子</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="18%"
    >
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        @click="successVisible = false"
      ></el-button>
      <h2 style="color: green">添加成功</h2>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [{ name: "food.jpeg", url: "" }],
      dialogImageUrl: "",
      dialogVisible: false,
      ruleForm: {//保证前后端名称相同
        byxzName: "",
        byxzPos: "",
        byxzImg: "",
        byxzImgA: "",
        byxzMy: "",
      },//如果没输入的提示信息
      rules: {
        byxzName: [
          { required: true, message: "请输入榜样学子的名称", trigger: "blur" },
        ],
        byxzPos: [
          { required: true, message: "请选择榜样的职位", trigger: "change" },
        ],
        byxzMy: [
          { required: true, message: "请填写榜样学子的故事", trigger: "blur" },
        ],
      },
      successVisible: false,
    };
  },
  methods: {
    // 提交方法 先判断提交表单是否有空=>validate
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 由于axios内部必须使用_this才能使用this
          const _this = this;
          this.axios({
            method: "post",
            url: _this.baseUrl() + "addByxz",
            //传递给后端的数据
            data: _this.ruleForm
          }).then(function (resp) {
            console.log(resp.data);
            _this.$refs.ruleForm.resetFields();//清空表单
            _this.successVisible = true;//提交成功提示
          });
        } else {
          console.log("error submit!!");//有空值错误打印
          return false;
        }
      });
    },
    //清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //图片显示
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less">
.addform {
  width: 800px;
  margin: 0 auto;
  .xx {
    float: left;
  }
}
@media screen and (max-width: 767px) {
  .addform {
    width: 100%;
  }
}
</style>